<template>
    <div class="outmain ba_f">
        <div class="shuju_title mar_b20">
            <div class="shuju_title_text">
                <span>素材管理</span>
            </div>
        </div>
        <div class="sc_attachmentImg">
            <div flex="box:first" class="attachment_img_box">
                <div class="attachment_img_left" v-loading="groupListLoading">
                    <el-menu class="group-menu" mode='vertical'>
                        <el-scrollbar style="height: 623px;width: 100%;">
                            <div class="goods-menu">
                                <el-menu-item index="all" @click="selected(0)"
                                              :class="{'is-active':allindex=='all'}" style="text-align: center">
                                    <span>全部</span>
                                </el-menu-item>
                                <template v-for="(item, index) in groupItem">
                                    <el-menu-item :index='item.id' @click="selected(item.id)">
                                        <div flex="dir:left box:last" class="fenlei">
                                            <i class="el-icon-circle-close gbfenlei" style="display: none"
                                               @click='deleteType(item.id)'></i>
                                            <div style="overflow: hidden;text-overflow: ellipsis;width: 100%">
                                                <span>{{item.name}}</span>
                                            </div>
                                        </div>
                                    </el-menu-item>
                                </template>
                            </div>
                        </el-scrollbar>
                        <el-popover placement="top" width="160" v-model="visible">
                            <el-input v-model="new_type_name" placeholder="请输入分组名称" size="mini"></el-input>
                            <div style="text-align: right; margin: 0;margin-top: 10px;">
                                <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                                <el-button type="primary" size="mini" @click="addNewAttType">确定</el-button>
                            </div>
                            <el-button slot="reference" style="margin-left: 22%;margin-top: 13px" size="small">
                                <i class="el-icon-circle-plus-outline"></i> 新建分组
                            </el-button>
                        </el-popover>
                    </el-menu>
                </div>
                <div flex="dir:top" class="attachment_img_right" v-loading="rightLoading">
                    <div class="selectBox flex-bet" style="display: flex">
                        <div class="flex-g-1 flex">
                            <el-input placeholder="请输入图片名称" suffix-icon="el-icon-search" v-model="atta_name" size="small"
                                      @keyup.enter.native="search(atta_name)" @input="search(atta_name)"
                                      style="width: 30%;padding-left: 12px;"></el-input>
                            <el-upload class="upload-demo mar_l20" :action="UploadUrl()" :multiple="true" :limit="50"
                                       :on-exceed="handleExceed" :file-list="fileList"
                                       :on-success="handleSuccess" :on-error="handleError" :before-upload="beforeUpload"
                                       :data="uploadData" :on-progress="handProgress">
                                <el-button size="small" type="primary">
                                    <i class="el-icon-plus avatar-uploader-icon"></i>
                                    上传图片
                                </el-button>
                            </el-upload>
                            <el-button size="small" class="mar_l20" @click="movePic">移动图片</el-button>
                            <el-button size="small" class="mar_l20" @click="delPic">批量删除</el-button>
                        </div>
                        <div class="">
                            <el-button size="small" type="danger" @click="recycleList">回收站列表</el-button>
                        </div>
<!--                        <div style="float: right;padding: 0 10px 0 0;">-->
<!--                            <el-upload class="upload-demo" :action="UploadUrl()" :multiple="true" :limit="50"-->
<!--                                       :on-exceed="handleExceed" :file-list="fileList"-->
<!--                                       :on-success="handleSuccess" :on-error="handleError" :before-upload="beforeUpload"-->
<!--                                       :data="uploadData" :on-progress="handProgress">-->
<!--                                <el-button size="small" type="primary">-->
<!--                                    <i class="el-icon-plus avatar-uploader-icon"></i>-->
<!--                                    上传图片-->
<!--                                </el-button>-->
<!--                            </el-upload>-->
<!--                        </div>-->
                    </div>
                    <el-scrollbar class="scrollbar" style="height: 560px;">
                        <div class="app-attachment-list">
                            <template v-for="(item, index) in attachments">
                                <el-tooltip class="item" effect="dark" :content="item.name" placement="top"
                                            :open-delay="1">
                                    <div class="app-attachment-item" @click='selectedItem(index,item.url,item)'>
                                        <div class="app-attachment-item-bj">
                                            <div class="imgStyle">
<!--                                                <img class="app-attachment-img" :src="item.url"-->
<!--                                                     style="width: 143px;height: 143px;border-radius: 5px;margin: 0 auto">-->
                                                <el-image
                                                        style="width: 130px; height: 130px;border-radius: 5px;"
                                                        :src="item.url"
                                                        fit="cover"></el-image>
                                                <div class="mask" :style="getStyle2(index)">
                                                    <i class="el-icon-check center-icon pos-center"></i>
                                                    <p class="triangle"><i class="el-icon-check"></i></p>
                                                </div>
                                            </div>
                                            <div class="app-attachment-name">{{item.name}}</div>
                                            <i class="el-icon-error delete" @click='deleteItem(item)'></i>
                                        </div>
                                    </div>
                                </el-tooltip>
                            </template>
                        </div>
                    </el-scrollbar>
                    <div style="padding: 5px;text-align: right;margin-top:auto">
                        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pagesize"
                                       @current-change="current_change">
                        </el-pagination>
                    </div>
                    <el-dialog
                            title="选择分类"
                            :visible.sync="dialogVisible3"
                            width="30%"
                            :close-on-click-modal="false">
                       <div class="pad_20">
                           <el-form ref="form" :model="form" label-width="120px">
                               <el-form-item label="请选择分类">
                                   <el-select v-model="form.typeValue" placeholder="请选择分类">
                                       <el-option
                                               v-for="item in groupItem"
                                               :key="item.id"
                                               :label="item.name"
                                               :value="item.id">
                                       </el-option>
                                   </el-select>
                               </el-form-item>
                           </el-form>
                       </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible3 = false">取 消</el-button>
                            <el-button type="primary" @click="save">确 定</el-button>
                        </span>
                    </el-dialog>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import index from '../../api/index';

    export default {
        created() {
            this.init();
        },
        data() {
            return {
                visible: false,//新建分类弹窗
                atta_name: '',//搜索图片名称
                category: 0,//分类ID
                keywords: '',
                // type_id:'',//分类ID
                total: 0,//默认数据总数
                pagesize: 30,//每页的数据条数
                currentPage: 1,//默认开始页面
                dialogVisible: false, //是否显示模态框
                groupItem: [], //分类组
                attachments: [],
                groupListLoading: false,
                rightLoading: false,
                new_type_name: '',
                fileList: [],//文件列表
                selectedArr: {},
                // srcType:''
                uploadData: {
                    key: "",
                    token: ""
                },
                file: {
                    Url: '',
                    path: '',
                    name: '',
                    size: 0
                },
                recycleType:1,
                allindex:'all',
                ids:[],
                floptions:[],
                form:{
                    typeValue:'',
                },
                dialogVisible3: false
            }
        },
        methods: {
            init() {
                this.getgroupItem();
                this.getAttachment_List();
            },
            getStyle2(index) {
                let that = this;
                var currentPage = that.currentPage,
                    s = that.selectedArr[that.type == 'img' ? 'danxuan' : 'item' + index + '' + currentPage]
                return s && s.page == currentPage && s.index == index ? 'display:block' : ''
            },
            modalClose() {
                let that = this;
                that.selectedArr = {}
            },
            handProgress() {
                let that = this;
                that.rightLoading = true
            },
            //获取左边分组
            getgroupItem() {
                let that = this;
                this.$api.get('common/file/get-category', {"storeId": this.type2,}, res => {
                    if (res.code == 1) {
                        that.groupItem = res.data
                        console.log(123,res.data)
                        that.groupListLoading = false
                        that.visible = false
                    } else {
                        that.groupListLoading = false
                    }
                });
            },
            //获取图片列表
            getAttachment_List() {
                let that = this;
                that.rightLoading = true
                this.$api.get('common/file/get-picture', {
                    "page": that.currentPage,
                    "category": that.category,
                    "keywords": that.keywords,
                    "storeId": this.type2,
                }, res => {
                    if (res.code == 1) {
                        that.attachments = res.data
                        that.total = res.count
                        that.rightLoading = false
                    } else {
                        that.rightLoading = false
                    }
                });
            },
            //回收站
            recycleList(){
                let that = this;
                that.rightLoading = true
                this.$api.get('common/file/recycle-picture', {
                    "page": that.currentPage,
                    "storeId": this.type2,
                }, res => {
                    if (res.code == 1) {
                        that.attachments = res.data
                        that.total = res.count
                        that.recycleType = res.type
                        that.rightLoading = false
                    } else {
                        that.rightLoading = false
                    }
                });
            },
            //新建分组
            addNewAttType() {
                let that = this;
                that.groupListLoading = true
                this.$api.post('common/file/save-category', {"storeId": this.type2, name: that.new_type_name}, res => {
                    if (res.code == 1) {
                        that.visible = false
                        that.$message({
                            message: res.msg,
                            type: 'success',
                            duration: 500,
                            onClose: () => {
                                that.new_type_name = ''
                                that.getgroupItem()
                            },
                        })
                    } else {
                        that.visible = false
                        that.$message.error(res.msg);
                    }
                });
            },
            search(atta_name) {
                let that = this;
                console.log(atta_name)
                this.keywords = atta_name
                // _this.init(keywords);
                that.getAttachment_List();
            },
            //切换分页
            current_change(currentPage) {
                let that = this;
                that.currentPage = currentPage;
                if(that.recycleType==2){
                    that.recycleList()
                }else {
                    that.getAttachment_List();
                }
            },
            //删除分类
            deleteType(id) {
                let that = this;
                that.groupListLoading = true
                this.$api.post('common/file/del-picture-category', {"id": id,}, res => {
                    if (res.code == 1) {
                        that.visible = false
                        that.$message({
                            message: res.msg,
                            type: 'success',
                            duration: 500,
                            onClose: () => {
                                that.getgroupItem()
                            },
                        })
                    } else {
                        that.$message.error(res.msg);
                        that.groupListLoading = false
                    }
                });
            },
            //删除图片
            deleteItem(item) {
                let that = this;
                that.rightLoading = true
                if(item.deleteAt){
                    this.$api.post('common/file/del-recycle-picture', {"id": item.id,}, res => {
                        if (res.code == 1) {
                            that.visible = false
                            that.$message({
                                message: res.msg,
                                type: 'success',
                                duration: 500,
                                onClose: () => {
                                    that.recycleList()
                                },
                            })
                        } else {
                            that.$message.error(res.msg);
                            that.groupListLoading = false
                        }
                    });
                }else {
                    this.$api.post('common/file/del-picture', {"id": item.id,}, res => {
                        if (res.code == 1) {
                            that.visible = false
                            that.$message({
                                message: res.msg,
                                type: 'success',
                                duration: 500,
                                onClose: () => {
                                    that.getAttachment_List()
                                },
                            })
                        } else {
                            that.$message.error(res.msg);
                            that.groupListLoading = false
                        }
                    });
                }
            },
            UploadUrl: function () {
                let backendPath = index.backendPath
                return backendPath + "common/file/get-category";
            },
            //上传前判断
            beforeUpload: function (file) {
                console.log('上传前判断', file)
                // var date = new Date();
                // filePath = 'yzd_edu/image/' + date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getTime() + this.getRandom(111111, 999999) + '.' + file.name.split(".")[1]
                // this.uploadData.key = filePath
                const isIMG =
                    file.type === 'image/jpg' ||
                    file.type === 'image/jpeg' ||
                    file.type === 'image/png' ||
                    file.type === 'image/gif'
                const isLt = file.size / 1024 / 1024 < 2
                if (!isIMG) {
                    this.$message.error("上传图片只支持jpg、jpeg、png格式!");
                    return false;
                }
                if (!isLt) {
                    this.$message.error("文件大小不能超过 2MB!");
                    return false;
                }
            },
            handleError: function (res) {
                this.$message({
                    message: "上传失败",
                    duration: 2000,
                    type: "warning"
                });
            },
            handleSuccess: function (res, file, fileList) {
                this.file = file
                this.addAttachment();//保存到数据库
            },
            handleExceed(files, fileList) {
                // console.log(files,fileList)
                this.$message.warning(`当前限制选择 50 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            addAttachment() {
                let that = this;
                const formData = new FormData();
                formData.append("file", this.file.raw);
                formData.append("category", this.category);
                formData.append("storeId", this.type2);
                this.$api.post('common/file/upload', formData, res => {
                    if (res.code == 1) {
                        that.getAttachment_List()//刷新列表
                        that.$message.success("上传成功");
                    } else {
                        that.$message.error(res.msg);
                        console.log(res.msg);
                    }
                });
            },
            // getRandom(start, end, fixed = 0) {
            //   let differ = end - start
            //   let random = Math.random()
            //   return (start + differ * random).toFixed(fixed)
            // },
            selected(id) {
                let that = this;
                that.rightLoading = true
                // that.uploadParams.type_id = id
                that.currentPage = 1
                that.category = id
                that.allindex = 'otherList'
                that.getAttachment_List();
            },
            selectedItem(index, url,item) {
                let that = this;
                // console.log(index,url)
                var istype = that.type == 'img', str = istype ? 'danxuan' : 'item' + index + '' + that.currentPage,
                    s = that.selectedArr[str]
                if (s && s.index == index) {
                    that.$delete(that.selectedArr, str);
                } else {
                    if (istype) {
                        that.$delete(that.selectedArr, str);
                    }
                    that.$set(that.selectedArr, str, {
                        page: that.currentPage,
                        index,
                        url,
                        id:item.id
                    })
                }
                var obj = that.selectedArr;
                var idArr = []
                for (let i in obj) {
                    idArr.push(obj[i].id); //属性
                    //arr.push(obj[i]); //值
                }
                // console.log(idArr)
                that.ids = idArr
            },
            movePic(){
                let that = this;
                that.rightLoading = true
                if(that.ids.length){
                    that.dialogVisible3 = true
                }else {
                    that.$message.error('请选择图片');
                    that.rightLoading = false
                }
            },
            save(){
                let that = this;
                if(that.form.typeValue){
                    this.$api.post('common/file/move-file', {"id":that.ids,typeId:that.form.typeValue}, res => {
                        if (res.code == 1) {
                            that.visible = false
                            that.$message({
                                message: res.msg,
                                type: 'success',
                                duration: 500,
                                onClose: () => {
                                    that.getAttachment_List()
                                },
                            })
                            that.modalClose()
                            that.dialogVisible3 = false
                        } else {
                            that.$message.error(res.msg);
                            that.rightLoading = false
                            that.dialogVisible3 = false
                        }
                    });
                }
            },
            delPic(){
                let that = this;
                that.rightLoading = true
                if(that.ids.length){
                    this.$api.post('common/file/del-picture', {"id":that.ids}, res => {
                        if (res.code == 1) {
                            that.visible = false
                            that.$message({
                                message: res.msg,
                                type: 'success',
                                duration: 500,
                                onClose: () => {
                                    that.getAttachment_List()
                                },
                            })
                            that.modalClose()
                        } else {
                            that.$message.error(res.msg);
                            that.rightLoading = false
                        }
                    });
                }else {
                    that.$message.error('请选择图片');
                    that.rightLoading = false
                }
            },
        }
    }
</script>
<style lang="scss">
    .sc_attachmentImg {
        .el-dialog {
            border-radius: 6px;
        }

        .goods-menu {
            width: 160px;
        }

        .goods-menu li {
            padding-left: 0 !important;
        }

        .el-dialog__title {
            line-height: 28px;
            font-size: 14px;
            color: #333;
        }

        .el-dialog__header {
            padding: 10px 20px;
            line-height: 1;
            border-bottom: 1px solid #f2f2f2;
        }

        .el-dialog__body {
            padding: 10px 20px;
        }

        .el-dialog__footer {
            border-top: 1px solid #f2f2f2;
        }

        .el-button--primary {
            color: #fff;
            background-color: #155BD4;;
            border-color: #155BD4;;
        }

        .el-pagination.is-background .el-pager li:not(.disabled).active {
            background-color: #155BD4;
            color: #FFF;
        }

        .el-dialog__wrapper {
            z-index: 2009 !important;
        }

        input[type=file] {
            display: none;
        }

        .delete {
            position: absolute;
            top: 2px;
            right: 2px;
            font-size: 16px;
            display: none;
        }

        .app-attachment-item {
            outline: none;
        }

        .app-attachment-item:hover .delete {
            display: block;
        }

        .el-upload-list {
            position: absolute;
            max-height: 355px;
            /* overflow-y: auto; */
            width: 252px;
            background: #fff;
            position: absolute;
            z-index: 1;
            border-radius: 4px;
            box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
            right: 0;
        }

        /* 图片上传 */
        .data-image {
            margin-top: 5px;
        }

        /* 图片选择框 */
        .attachment_img_box {
            /*border: 1px solid rgb(227, 227, 227);*/
            margin-bottom: 10px;
            min-height: 300px;
        }

        .attachment_img_left {
            border-right: 1px solid #F2F2F2;
        }

        .group-menu {
            border-right: none;
            width: 165px;
        }

        .selectBox {
            padding: 10px 0;
        }

        .app-attachment-list {
            /*padding: 5px;*/
            width: 100%;
            padding-right: 10px;
        }

        .app-attachment-list * {
            box-sizing: border-box;
        }

        .app-attachment-list:after {
            clear: both;
            display: block;
            content: " ";
        }

        .app-attachment-item {
            display: inline-block;
            cursor: pointer;
            position: relative;
            float: left;
            /*width: 20%;*/
            width: 142px;
            height: 190px;
            padding-bottom: 20px;
            /*margin: 7.5px;*/
            text-align: center;
            /*padding: 10px 10px 0;*/
        }

        .app-attachment-item-bj {
            margin: 10px;
        }

        .imgStyle {
            position: relative;
        }

        .imgStyle .mask {
            margin: 0 auto;
            display: none;
            border-radius: 5px;
            width: 130px;
            height: 130px;
            position: absolute;
            background: rgba(199, 194, 194, .7);
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            overflow: hidden;
        }

        .mask .center-icon {
            font-size: 40px;
            color: #fff;
        }

        .mask .center-icon:before {
            transform: rotate(0);
        }

        .mask .pos-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
        }

        .mask .triangle {
            display: inline-block;
            position: absolute;
            right: 0;
            bottom: -26px;
            line-height: 60px;
            text-align: center;
            background: #409eff !important;
            transform: rotate(45deg);
        }

        .mask .triangle .el-icon-check:before {
            display: inline-block;
            margin-top: 12px;
            transform: rotate(-67deg);
            position: relative;
            top: -2px;
        }

        .mask .triangle i {
            color: #fff;
        }

        .app-attachment-item.checked,
        .app-attachment-item.selected {
            box-shadow: 0 0 0 1px #1ed0ff;
            background: #daf5ff;
            border-radius: 5px;
        }

        .app-attachment-item.checked .app-attachment-active-icon,
        .app-attachment-item.selected .app-attachment-active-icon {
            opacity: 1;
        }

        .app-attachment-item .app-attachment-img {
            display: block;
        }

        .app-attachment-item .file-type-icon {
            width: 30px;
            height: 30px;
            border-radius: 30px;
            background: #666;
            color: #fff;
            text-align: center;
            line-height: 30px;
            font-size: 24px;
        }

        .scrollbar {
            height: 100%;
        }

        .app-attachment-name {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            margin-top: 5px;
            overflow: hidden;
        }

        .el-upload-list {
            display: none;
        }

        .el-menu-item.is-active {
            /*border-color: transparent;*/
            color: #409eff !important;
            background: #c3e1fe !important;
        }

        .el-menu-item:focus, .el-menu-item:hover {
            outline: 0;
            background: #fff !important;
        }

        .el-menu-item.is-active:focus, .el-menu-item.is-active:hover {
            color: #409eff !important;
            background: #c3e1fe !important;
        }

        .el-menu-item, .el-submenu__title {
            width: 127px;
            height: 36px;
            line-height: 36px;
            border-radius: 5px;
            text-align: center;
            margin-bottom: 15px;
        }

        .el-menu-item {
            padding: 0;
        }

        .el-scrollbar__wrap {
            overflow-x: hidden;
        }

        .fenlei {
            text-align: center;
        }

        .fenlei:hover .gbfenlei {
            display: block !important;
        }

        .gbfenlei {
            position: absolute;
            top: -9px;
            right: 4px;
            font-size: 18px;
            cursor: pointer;
            color: #d7d7d7;
        }

        [flex] {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex
        }

        [flex] > * {
            display: block
        }

        [flex] > [flex] {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex
        }

        [flex~="dir:left"] {
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -webkit-flex-direction: row;
            -ms-flex-direction: row;
            flex-direction: row
        }

        [flex~="dir:right"] {
            -webkit-box-orient: horizontal;
            -webkit-box-direction: reverse;
            -webkit-flex-direction: row-reverse;
            -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
            -webkit-box-pack: end
        }

        [flex~="dir:top"] {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column
        }

        [flex~="dir:bottom"] {
            -webkit-box-orient: vertical;
            -webkit-box-direction: reverse;
            -webkit-flex-direction: column-reverse;
            -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
            -webkit-box-pack: end
        }

        [flex~="main:left"] {
            -webkit-box-pack: start;
            -webkit-justify-content: flex-start;
            -ms-flex-pack: start;
            justify-content: flex-start
        }

        [flex~="main:right"] {
            -webkit-box-pack: end;
            -webkit-justify-content: flex-end;
            -ms-flex-pack: end;
            justify-content: flex-end
        }

        [flex~="main:justify"] {
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
            justify-content: space-between
        }

        [flex~="main:center"] {
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center
        }

        [flex~="cross:top"] {
            -webkit-box-align: start;
            -webkit-align-items: flex-start;
            -ms-flex-align: start;
            align-items: flex-start
        }

        [flex~="cross:bottom"] {
            -webkit-box-align: end;
            -webkit-align-items: flex-end;
            -ms-flex-align: end;
            align-items: flex-end
        }

        [flex~="cross:center"] {
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center
        }

        [flex~="cross:baseline"] {
            -webkit-box-align: baseline;
            -webkit-align-items: baseline;
            -ms-flex-align: baseline;
            align-items: baseline
        }

        [flex~="cross:stretch"] {
            -webkit-box-align: stretch;
            -webkit-align-items: stretch;
            -ms-flex-align: stretch;
            align-items: stretch
        }

        [flex~="box:mean"] > *, [flex~="box:first"] > *, [flex~="box:last"] > *, [flex~="box:justify"] > * {
            width: 0;
            height: auto;
            -webkit-box-flex: 1;
            -webkit-flex-grow: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            -webkit-flex-shrink: 1;
            -ms-flex-negative: 1;
            flex-shrink: 1
        }

        [flex~="box:first"] > :first-child, [flex~="box:last"] > :last-child, [flex~="box:justify"] > :first-child, [flex~="box:justify"] > :last-child {
            width: auto;
            -webkit-box-flex: 0;
            -webkit-flex-grow: 0;
            -ms-flex-positive: 0;
            flex-grow: 0;
            -webkit-flex-shrink: 0;
            -ms-flex-negative: 0;
            flex-shrink: 0
        }

        [flex~="dir:top"][flex~="box:mean"] > *, [flex~="dir:top"][flex~="box:first"] > *, [flex~="dir:top"][flex~="box:last"] > *, [flex~="dir:top"][flex~="box:justify"] > *, [flex~="dir:bottom"][flex~="box:mean"] > *, [flex~="dir:bottom"][flex~="box:first"] > *, [flex~="dir:bottom"][flex~="box:last"] > *, [flex~="dir:bottom"][flex~="box:justify"] > * {
            width: auto;
            height: 0;
            -webkit-box-flex: 1;
            -webkit-flex-grow: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            -webkit-flex-shrink: 1;
            -ms-flex-negative: 1;
            flex-shrink: 1
        }

        [flex~="dir:top"][flex~="box:first"] > :first-child, [flex~="dir:top"][flex~="box:last"] > :last-child, [flex~="dir:top"][flex~="box:justify"] > :first-child, [flex~="dir:top"][flex~="box:justify"] > :last-child, [flex~="dir:bottom"][flex~="box:first"] > :first-child, [flex~="dir:bottom"][flex~="box:last"] > :last-child, [flex~="dir:bottom"][flex~="box:justify"] > :first-child [flex~="dir:bottom"][flex~="box:justify"] > :last-child {
            height: auto;
            -webkit-box-flex: 0;
            -webkit-flex-grow: 0;
            -ms-flex-positive: 0;
            flex-grow: 0;
            -webkit-flex-shrink: 0;
            -ms-flex-negative: 0;
            flex-shrink: 0
        }

        [flex-box="0"] {
            -webkit-box-flex: 0;
            -webkit-flex-grow: 0;
            -ms-flex-positive: 0;
            flex-grow: 0;
            -webkit-flex-shrink: 0;
            -ms-flex-negative: 0;
            flex-shrink: 0
        }

        [flex-box="1"] {
            -webkit-box-flex: 1;
            -webkit-flex-grow: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            -webkit-flex-shrink: 1;
            -ms-flex-negative: 1;
            flex-shrink: 1
        }

        [flex-box="2"] {
            -webkit-box-flex: 2;
            -webkit-flex-grow: 2;
            -ms-flex-positive: 2;
            flex-grow: 2;
            -webkit-flex-shrink: 2;
            -ms-flex-negative: 2;
            flex-shrink: 2
        }

        [flex-box="3"] {
            -webkit-box-flex: 3;
            -webkit-flex-grow: 3;
            -ms-flex-positive: 3;
            flex-grow: 3;
            -webkit-flex-shrink: 3;
            -ms-flex-negative: 3;
            flex-shrink: 3
        }

        [flex-box="4"] {
            -webkit-box-flex: 4;
            -webkit-flex-grow: 4;
            -ms-flex-positive: 4;
            flex-grow: 4;
            -webkit-flex-shrink: 4;
            -ms-flex-negative: 4;
            flex-shrink: 4
        }

        [flex-box="5"] {
            -webkit-box-flex: 5;
            -webkit-flex-grow: 5;
            -ms-flex-positive: 5;
            flex-grow: 5;
            -webkit-flex-shrink: 5;
            -ms-flex-negative: 5;
            flex-shrink: 5
        }

        [flex-box="6"] {
            -webkit-box-flex: 6;
            -webkit-flex-grow: 6;
            -ms-flex-positive: 6;
            flex-grow: 6;
            -webkit-flex-shrink: 6;
            -ms-flex-negative: 6;
            flex-shrink: 6
        }

        [flex-box="7"] {
            -webkit-box-flex: 7;
            -webkit-flex-grow: 7;
            -ms-flex-positive: 7;
            flex-grow: 7;
            -webkit-flex-shrink: 7;
            -ms-flex-negative: 7;
            flex-shrink: 7
        }

        [flex-box="8"] {
            -webkit-box-flex: 8;
            -webkit-flex-grow: 8;
            -ms-flex-positive: 8;
            flex-grow: 8;
            -webkit-flex-shrink: 8;
            -ms-flex-negative: 8;
            flex-shrink: 8
        }

        [flex-box="9"] {
            -webkit-box-flex: 9;
            -webkit-flex-grow: 9;
            -ms-flex-positive: 9;
            flex-grow: 9;
            -webkit-flex-shrink: 9;
            -ms-flex-negative: 9;
            flex-shrink: 9
        }

        [flex-box="10"] {
            -webkit-box-flex: 10;
            -webkit-flex-grow: 10;
            -ms-flex-positive: 10;
            flex-grow: 10;
            -webkit-flex-shrink: 10;
            -ms-flex-negative: 10;
            flex-shrink: 10
        }

        [flex~="wrap:nowrap"] {
            flex-wrap: nowrap
        }

        [flex~="wrap:wrap"] {
            flex-wrap: wrap
        }

        [flex~="wrap:wrap-reverse"] {
            flex-wrap: wrap-reverse
        }
    }
</style>
